<!--
 * @Author: your name
 * @Date: 2020-09-01 11:26:12
 * @LastEditTime: 2020-09-24 17:39:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-dialog.vue
-->

<template>
  <CustomDialog v-model:visible="visibleDialog" @confirm="handleOk">
    <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
      <template v-for="item in form" :key="item.key">
        <a-form-item :label="item.label" v-if="item.key === 'show_type'">
          <a-select v-model:value="data.record[item.key]">
            <a-select-option :value="10">
              小图
            </a-select-option>
            <a-select-option :value="20">
              大图
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="item.label" v-else-if="item.key === 'category_id'">
          <a-select v-model:value="data.record[item.key]">
            <a-select-option v-for="item in category" :key="item.category_id" :value="item.category_id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="item.label" v-else-if="item.key === 'image_id'">
          <div class="upload-wrap" @click="visibleUpload = true">
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" class="preview-img" />
            <div v-else class="upload-box">
              <svgIcon name="upload" />
              <div>Upload</div>
            </div>
          </div>
        </a-form-item>
        <FormItem v-else :data="data.record" :item="item" />
        <UploadDialog v-model:visible="visibleUpload" type="single" @file="getFile" />
      </template>
    </a-form>
  </CustomDialog>
</template>

<script>
import { BASE_URL } from '../../../utils/config';
import { computed, getCurrentInstance, ref, provide } from 'vue';
import CustomDialog from '../../../components/custom-dialog/index.vue';
import FormItem from '../../../components/form-item/index.vue';
import UploadDialog from '../../../components/upload/upload-dialog';
export default {
  name: 'ArticleDialog',
  components: {
    CustomDialog,
    FormItem,
    UploadDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    let { ctx } = getCurrentInstance();

    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    let form = [
      {
        label: '标题',
        key: 'article_title',
        type: 1
      },
      {
        label: '列表显示方式',
        key: 'show_type',
        type: 1
      },
      {
        label: '分类',
        key: 'category_id',
        type: 1
      },
      {
        label: '封面',
        key: 'image_id',
        type: 1
      },
      {
        label: '内容',
        key: 'article_content',
        type: 7
      },
      {
        label: '状态',
        key: 'article_status',
        type: 3
      },
      {
        label: '排序',
        key: 'article_sort',
        type: 2
      },
      {
        label: '是否删除',
        key: 'is_delete',
        type: 3
      }
    ];

    let category = ref([]);
    async function getCategory() {
      let res = await ctx.$fetch.post('/content.article.category/list');
      category.value = res.data;
    }
    getCategory();

    let fileList = ref([]);
    let imageUrl = ref('');

    if (!props.data.isAdd) {
      imageUrl = props.data.record.image.file_path;
    }

    let visibleUpload = ref(false);
    function getFile(file) {
      props.data.record.image_id = file.file_id;
      imageUrl.value = file.file_path;
    }
    function handleChange(info) {
      if (info.file.status === 'done') {
        let response = fileList.value[0].response;
        if (response && response.code === 1) {
          imageUrl.value = response.data.file_path;
          props.data.record.image_id = response.data.file_id;
        } else {
          ctx.$message.error(response.msg);
        }
      }
    }

    async function handleOk() {
      let res = null;
      if (props.data.isAdd) {
        res = await ctx.$fetch.post('/content.article/add', props.data.record);
      } else {
        res = await ctx.$fetch.post('/content.article/edit', props.data.record);
      }
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
    }

    function handleUploadOk(file) {
      let imgs = '';
      file.forEach((f) => {
        imgs += `<img src="${f.file_path}"/>`;
      });
      props.data.record.article_content = props.data.record.article_content + imgs;
    }

    provide('uploadOk', handleUploadOk);

    return {
      visibleDialog,
      form,
      handleOk,
      fileList,
      BASE_URL,
      handleChange,
      imageUrl,
      category,
      visibleUpload,
      getFile,
      handleUploadOk
    };
  }
};
</script>

<style lang="scss" scoped>
.preview-img {
  width: 102px;
  height: 102px;
}
</style>
